<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- 当我们需要把一个数组或者一个对象循环显示的时候，这时候我们可以使用v-for，使用v-for要使用特定语法“ alias in expression” -->
    <!-- 数组展示 -->
    <h1 v-for="item in strData">{{item}}</h1>
    <hr/>
    <!-- 获取值和下标值 -->
    <h1 v-for="(item, index) in strData">{{item}}-{{index}}</h1>
    <hr/>
    <h1 v-for="item in strData1">{{item.name}}</h1>
    <hr/>
    <h1 v-for="(item, index) in strData1">{{item.name + ":" + index}}</h1>
    <hr/>
    <!-- 对象展示 -->
    <h1 v-for="(value, key) in objData">{{value +":"+ key}}</h1>
    <hr/>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            strData: ['vue', 'react', 'angular js'],
            strData1: [{name: 'vue-1'}, {name: 'react-1'}, {name: 'angular js-1'}],
            objData: {name: "你", name1: "好"}
        }
    });
</script>
</html>
